<template>
  <div class="star" :class="' star-' + size">
        <span class="star-item " v-for="(item,index) in countStar" :key="index" :class="item"></span>
    </div>
</template>

<script>
export default {
  props:{
      score: {
          type: Number,
          required: true
      },
      size: {
          type: Number,
          required: true
      },
  },
  // 计算显示多少个全星半星灰星
   computed: {
      countStar(){
          const arrStar = []
          const {score} = this
          const parseIntScore = Math.floor(score)

          
            // 添加全星
            for (let i = 0; i < parseIntScore; i++) {
                arrStar.push('on')
            }

            //   添加半星
            if(score*10 - parseIntScore*10 >= 5){
                arrStar.push('half')
            }

            // 添加灰星
            while(arrStar.length < 5){
                arrStar.push('off')
            }

        return arrStar
      }
  }, 
}
</script>
<style lang='less' scoped>
.star {
    float: left;
    font-size: 0;

    .star-item {
        display: inline-block;
        background-repeat: no-repeat;
    }

    &.star-48 .star-item {
        width: 20px;
        height: 20px;
        margin-right: 22px;
        background-size: 20px 20px;

        &:last-child {
        margin-right: 0;
        }

        &.on {
        background-image: url("./stars/star48_on@2x.png");
        }

        &.half {
        background-image: url("./stars/star48_half@2x.png");
        }

        &.off {
        background-image: url("./stars/star48_off@2x.png");
        }
    }

    &.star-36 .star-item {
        width: 15px;
        height: 15px;
        margin-right: 6px;
        background-size: 15px 15px;

        &:last-child {
        margin-right: 0;
        }

        &.on {
        background-image: url("./stars/star36_on@2x.png");
        }

        &.half {
        background-image: url("./stars/star36_half@2x.png");
        }

        &.off {
        background-image: url("./stars/star36_off@2x.png");
        }
    }

    &.star-24 .star-item {
        width: 10px;
        height: 10px;
        margin-right: 3px;
        background-size: 10px 10px;

        &:last-child {
        margin-right: 0;
        }

        &.on {
        background-image: url("./stars/star24_on@2x.png");
        }

        &.half {
        background-image: url("./stars/star24_half@2x.png");
        }

        &.off {
        background-image: url("./stars/star24_off@2x.png");
        }
    }
}
</style>